<template>
  <el-container>
    <el-header>
      <el-button @click="backClassManage" icon="el-icon-arrow-left" size="mini" style="margin-right: 10px">返回</el-button>
      <el-input v-model="queryInfo.userName" @blur="getClassMateInfo" @keyup.enter.native="$event.target.blur" placeholder="搜索用户名"
                prefix-icon="el-icon-search"></el-input>
      <el-button type="primary" style="margin-left: 5px" icon="el-icon-search" @click="getClassMateInfo">查询</el-button>
    </el-header>

    <el-main>

      <el-table
        ref="multipleTable"
        highlight-current-row
        v-loading="loading"
        :border="true"
        :data="classMateInfo"
        tooltip-effect="dark"
        style="width: 100%">

        <el-table-column align="center"
                         prop="userClassRel.classId"
                         label="班课号">
        </el-table-column>

        <el-table-column align="center"
                         prop="userClassRel.userName"
                         label="用户名">
        </el-table-column>

        <el-table-column align="center"
                         prop="trueName"
                         label="姓名">
        </el-table-column>

        <el-table-column align="center"
                         label="加入时间">
          <template slot-scope="scope">
            {{ scope.row.userClassRel.createDate }}
          </template>
        </el-table-column>

        <el-table-column align="center"
                         label="操作" v-if="roleId === '2'||roleId === '3'">
          <template slot-scope="scope">
            <el-button type="warning" @click.stop="showDeleteClassMateDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页-->
      <el-pagination style="margin-top: 25px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

    </el-main>

  </el-container>
</template>

<script>
export default {
  name: "ClassManage",

  data () {
    return{
      roleId:'',
      //查询同学的参数
      queryInfo: {
        'classId':this.$route.params.classId,
        'userName': '',
        'pageNo': 1,
        'pageSize': 10
      },
      //班级同学信息
      classMateInfo: [],
      //所有同学的条数
      total: 0,
      //表格信息加载
      loading: true
    }
  },
  created () {
    this.getUserRole()
    this.getClassMateInfo()
  },
  methods :{
    //角色判别
    getUserRole (){
      this.$http.get(this.API.checkToken).then((resp) => {
        if (resp.data.code === 200){
          this.roleId = resp.data.data.roleId;
        }else{
          this.$router.push('/')
        }
      })
    },
    getClassMateInfo(){
      this.$http.get(this.API.getClassMateInfo, { params: this.queryInfo }).then((resp) => {
        if (resp.data.code === 200) {
          this.classMateInfo = resp.data.data.classMateInfos;
          this.total = resp.data.data.total;
          this.loading = false;
        } else {
          this.$notify({
            title: 'Tips',
            message: '获取信息失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    //分页插件的大小改变
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getClassMateInfo()
    },
    //分页插件的页数
    handleCurrentChange (val) {
      this.queryInfo.pageNo = val
      this.getClassMateInfo()
    },
    showDeleteClassMateDialog(row){
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '是否确认踢出同学： '),
          h('i', { style: 'color: teal' }, row.userClassRel.userName)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          instance.confirmButtonLoading = false
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            this.$http.get(this.API.deleteClassMate, {params: { 'classId': row.userClassRel.classId, 'userName': row.userClassRel.userName }}).then((resp) => {
              if (resp.data.code === 200) {
                //删除成功后,回调更新数据
                this.getClassMateInfo()
                instance.confirmButtonLoading = false
                done()
                this.$notify({
                  title: 'Tips',
                  message: resp.data.message,
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$notify({
                  title: 'Tips',
                  message: '操作失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            done();
          }
        }
      }).catch(() => {})
    },
    //返回我的班级页面
    backClassManage(){
      this.$router.push('/classManage');
    }
  }
}
</script>

<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
}

.el-input {
  width: 200px;
}

.el-container {
  animation: leftMoveIn .7s ease-in;
}

@keyframes leftMoveIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

/deep/ .el-table thead {
  color: rgb(85, 85, 85) !important;
}

/*表格的头部样式*/
/deep/ .has-gutter tr th {
  background: rgb(242, 243, 244);
  color: rgb(85, 85, 85);
  font-weight: bold;
  line-height: 32px;
}

.el-table {
  box-shadow: 0 0 1px 1px gainsboro;
}
</style>
